<template>
	<div>
		<div v-if="show">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">全部门店</el-breadcrumb-item>
				<el-breadcrumb-item>上架中</el-breadcrumb-item>
				<el-breadcrumb-item>已下架</el-breadcrumb-item>
			</el-breadcrumb>
			<el-row style="margin-top: 10px;">
				<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
					<el-form-item label="门店名称">
						<el-input v-model="queryInfo.keyword" placeholder="输入门店名称"></el-input>
					</el-form-item>
					<el-form-item label="门店手机号">
						<el-input v-model="queryInfo.phone" placeholder="输入门店手机号"></el-input>
					</el-form-item>
					<el-date-picker value-format='yyyy-MM-dd hh:mm:ss' v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
					<el-form-item>
						<el-button @click="onSubmit" type="primary">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<el-button type="primary" @click="addStore">新增门店</el-button>
			</el-row>

			<el-dialog @close="clear()" :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="StoreData">
					<el-form-item label="门店名称" label-width="80px">
						<el-input v-model="StoreData.shopName" autocomplete="off" placeholder="请输入门店名称"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" label-width="80px">
						<el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader>
					</el-form-item>
					<el-form-item label="" label-width="80px">
						<el-input placeholder="请输入门店详细地址" v-model="StoreData.shopAddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="门店坐标" label-width="80px">
						<el-button @click="getGeo">获取位置</el-button>
						<span v-show="StoreData.shopLongitude&&StoreData.shopLatitude">
							{{StoreData.shopLongitude}},{{StoreData.shopLatitude}}
						</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</div>
			</el-dialog>

			<el-table :data="shopList" :header-cell-style="{backgroundColor:'#eee'}" border>
				<el-table-column prop="shopName" label="门店"></el-table-column>
				<el-table-column prop="shopId" label="ID"></el-table-column>
				<el-table-column prop="shopPhone" label="门店手机号"></el-table-column>
				<el-table-column prop="shopAddress" label="门店地址"></el-table-column>
				<el-table-column prop="shopDescribe" label="营业时间"></el-table-column>
				<el-table-column prop="shopGoodsList" label="关联小区"></el-table-column>
				<el-table-column prop="shopOrderCount" label="订单总数"></el-table-column>
				<el-table-column prop="addTime" label="添加时间"></el-table-column>
				<el-table-column prop="shopCategoryList" label="提交方式"></el-table-column>
				<el-table-column prop="shopStatus" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.shopStatus==1" type="success">上架中</el-tag>
						<el-tag v-else type="danger">下架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link size="small" @click="storeManager(scope.row)" type="primary"
							:underline="false">门店管理</el-link>
						<el-link type="primary" @click="editStore(scope.row)" :underline="false">修改门店资料</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @next-click='next'
				@prev-click="prev" :current-page="queryInfo.pageNum" :page-sizes="[5,10, 20, 30, 40]" :page-size="100"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<div v-else>
			<!-- 点击驿站管理后显示的页面 ：
			soterInfo 把当前页面中点击的那个门店信息传入给该子组件shutdown 子组件中定义的事件，
			当子组件中的返回按钮被点击则关闭该页面显示-->
			<mdstore :storeInfo="StoreData" @shutdown="sd"></mdstore>
		</div>
	</div>
</template>
<script>
	import mdstore from './MDStore.vue'
	import citys from '../assets/citydata.js'
	export default {
		components: {
			mdstore
		},
		data() {
			return {
				queryInfo: {
					shopStatus: '',
					keyword: '',
					shopName: '',
					shopPhone: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5
				},
				date: '',
				total: 1,
				shopList: [],
				title: "门店新增",
				show: true,
				dialogFormVisible: false,
				addOrUpdateFlag: 1,
				StoreData: {

					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: "",

				},
				mounted() {
					this.queryShopList()
				},
				address: [],
				citys: citys,
			}
		},
		methods: {
			storeManager(row) {
				this.show = false
				this.StoreData = row
			},
			sd(isclose) {
				this.show = isclose
				this.queryShopList()
			},
			clear() {
				this.dialogFormVisible = false
				this.shopList = {
					shopName: '',
					shopImage: '',
					shopPhone: '',
					shopProvince: '',
					shopCity: '',
					shopDistrict: '',
					shopAddress: '',
					shopDescribe: '',
					shopLatitude: '',
					shopLongitude: ''
				}
				// this.city = []
				this.date2 = ['', '']
			},
			editStore(row) {
				this.StoreData = row;
				this.dialogFormVisible = true;
				this.title = "编辑门店";
				this.address = [this.StoreData
					.shopProvince, this.StoreData.shopCity, this.StoreData.shopDistrict
				];
				this.StoreData.addOrUpdateFlag = 2
			},
			addStore() {
				this.dialogFormVisible = true,
					this.title = '门店新增',
					this.StoreData.addOrUpdateFlag = 1
			},
			cancle() {
				this.dialogFormVisible = false;
				this.address = [];
				this.StoreData = {
					addOrUpdateFlag: 1,
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: ""
				}
			},
			getGeo() {
				if (!this.StoreData.shopProvince) {
					this.$message.error('请选择省市区地址')
					return false;
				}
				let address = this.StoreData.shopProvince + this.StoreData
					.shopCity + this.StoreData.shopDistrict + this.StoreData.shopAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
					params: {
						key: '457886b5972a97e93fb9cdccebfd450f',
						'address': address
					}
				}).then((res) => {

					let location = res.data.geocodes[0].location
					this.StoreData.shopLatitude = location.split(',')[0]
					this.StoreData.shopLongitude = location.split(',')[1]
				})
			},
			confirm() {
				let url = ''
				if (this.title == '门店新增') {
					url = 'shop/addShop'
				} else {
					url = 'shop/modifyShop'
				}
				this.$http.post(
						url,
						this
						.StoreData)
					.then((resp) => {
						if (resp.data.status == 200) {
							this.$message.success(resp.data.message)
							this.queryShopList()
							this.cancle()
						} else {
							this.$message.error('操作失败!')
						}
					})
			},
			onSubmit() {
				this.queryShopList(),
					console.log(this.queryInfo.shopName)
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val,
					this.queryShopList()
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val,
					this.queryShopList()
			},
			next(index) {
				this.queryInfo.pageNum = index,
					this.queryShopList()
			},
			prev(index) {
				this.queryInfo.pageNum = index,
					this.queryShopList()
			},
			queryShopList() {
				this.$http.get('shop/querySearchShopList', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shopList = res.data.data.list;
							this.total = res.data.data.total;
							/* for (let item of this.shopList) {
								if (item.shopStatus == 1) {
									item.shopStatus = '已上架'
								} else {
									item.shopStatus = '已下架'
								}
							} */
						} else {
							this.$message.error('服务器接口异常')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常')
					})
			}
		},
		mounted() {
			this.queryShopList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.StoreData.shopProvince = this.address[0];
				this.StoreData.shopCity = this.address[1];
				this.StoreData.shopDistrict = this.address[2];
			}
		}
	}
</script>

<style>
</style>